# Introduction

Tailwind CSS is very productive and really easy to use with React. You can easily style elements by specifying a `className` attribute.

```tsx
<div className="rounded-lg border bg-slate-100 text-white shadow-sm" />
```

...but creating reusable React components with Tailwind CSS is not trivial.

```tsx
const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={clsx(
      "rounded-lg border bg-slate-100 text-white shadow-sm",
      className,
    )}
    {...props}
  />
));
```

You end up writing lot of lines just to reuse some class names.

`twc` aims to make it easy and more productive, allowing you to focus on building UI instead of writing code.

```tsx
const Card = twc.div`rounded-lg border bg-slate-100 text-white shadow-sm`;
```
